//################################
// 版权所有：中国农业银行软件开发中心
// 系统名称：移动办公应用-手机版
// 文件名称：index.js
// 创建时间：2016年08月04日
// 创建人员：Panda
// 功能说明：公文详情页面TabBar公共组件
//################################

'use strict';

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableWithoutFeedback,
} from 'react-native';

import Colors from '../../common/colors';

class TabBar extends Component {
    static propTypes = {
		goToPage: React.PropTypes.func,
        activeTab: React.PropTypes.number,
        tabs: React.PropTypes.array,
	}

    constructor(props) {
        super(props);
    }

    onPress(i) {
        if (this.props.activeTab !== i) {
            this.props.goToPage(i);
        }
    }

    render() {
        return (
            <View style={[styles.tabs, this.props.style, ]}>
                {
                    this.props.tabs.map((tab, i) => {
                        return (
                            <TouchableWithoutFeedback key={tab} onPress={() => this.onPress(i)} style={styles.tab}>
                                <View style={[styles.innerview, {borderBottomColor: this.props.activeTab === i ? Colors.highlightOrange : Colors.gray,borderBottomWidth: this.props.activeTab === i ?2.5:0.5}]}>
                                    <Text style={[styles.text, {color: this.props.activeTab === i ? Colors.highlightOrange : Colors.highlightGreen}]}>{tab}</Text>
                                </View>
                            </TouchableWithoutFeedback>
                        );
                    })
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    tab: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        // paddingBottom: 10,
    },
    tabs: {
        height: 45,
        flexDirection: 'row',
        // paddingTop: 5,
        // borderWidth: 1,
        // borderBottomWidth: 0,
        // borderLeftWidth: 0,
        // borderRightWidth: 0,
        // borderTopColor: Colors.gray,
        backgroundColor: Colors.lightGray,
    },
    innerview: {
        flex: 1,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        // borderTopWidth: 1,
        borderBottomWidth: 0.5,
        // borderTopColor: Colors.gray,
        backgroundColor: Colors.appBackground,
    },
    text: {
        fontSize: 18,
    },
});

export default TabBar;